<!-- 数据概览 -->
<template>
    <div class="data-overview">
        <div class="map-box">
            <map-2d
                :mapId="mapConfig.mapId"
                :center="mapConfig.center"
                :zoom="mapConfig.zoom"
                :basemaps="mapConfig.basemaps"
                @MapLoadSuccess="handelMapLoadSuccess"
            />
        </div>
        <div class="left-container" v-if="mapLoadSuccess">
            <!-- 事件统计 -->
            <transition>
                <div class="card-container event-repot animate__animated animate__backInLeft" v-if="loadData">
                    <div class="card-title">事件统计</div>
                    <div class="card-content">
                        <div class="item" v-for="(item, index) in eventStatisData" :key="index">
                            <div class="icon">
                                <img :src="item.icon" alt="" />
                            </div>
                            <div class="content">
                                <div class="name">{{ item.name }}</div>
                                <div class="value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            <!-- 巡查巡检 -->
            <!-- <transition>
                <div class="card-container patrol-ins animate__animated animate__backInLeft" v-if="loadData">
                    <div class="card-title">巡查巡检</div>
                    <div class="card-content">
                        <div class="item" v-for="(item, index) in patrolIns" :key="index">
                            <div class="label">
                                <span class="name">{{ item.name }}</span>
                                <span class="value">{{ item.value }}</span>
                            </div>
                            <div class="progess">
                                <el-progress
                                    class="my-progress"
                                    :text-inside="true"
                                    :percentage="Number((item.value / 12) * 100).toFixed(0)"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </transition> -->
            <!-- 事件列表 -->
            <transition>
                <div class="card-container event-list animate__animated animate__backInLeft" v-if="loadData">
                    <div class="card-title">事件列表</div>
                    <div class="card-content">
                        <Vue3SeamlessScroll
                            class="scroll"
                            v-model="isScroll"
                            :list="eventListData"
                            :step="0.3"
                            :hover="true"
                            :limit-scroll-num="16"
                            :wheel="true"
                        >
                            <div class="list-item" v-for="(item, index) in eventListData" :key="index">
                                <div class="left">
                                    {{
                                        item.applyContent.length > 10
                                            ? item.applyContent.slice(0, 10) + '...'
                                            : item.applyContent
                                    }}
                                </div>
                                <div class="right">
                                    <div
                                        class="value"
                                        :style="item.status === '0' ? { color: 'red' } : { color: 'green' }"
                                    >
                                        {{ item.status === '0' ? '未解决' : '已解决' }}
                                    </div>
                                </div>
                            </div>
                        </Vue3SeamlessScroll>
                    </div>
                </div>
            </transition>
        </div>
		<div class="right-container" v-if="mapLoadSuccess">
            <transition>
                <div class="card-container osmotic-pressure animate__animated animate__backInRight" v-if="loadData && JSON.stringify(selectedMapAreaData) !== '{}'">
                    <div class="card-title">站点介绍</div>
                    <div class="card-content">
						<div class="info">
							<div class="info-list">
								<div class="item">
									<span class="label"> 名称： </span>
									<span class="value">
										{{ selectedMapAreaData.areaName }}
									</span>
								</div>
								<div class="item">
									<span class="label"> 编码： </span>
									<span class="value">
										{{ selectedMapAreaData.projectCode }}
									</span>
								</div>
								<div class="item">
									<span class="label"> 地址： </span>
									<span class="value">
										{{ selectedMapAreaData.projectAddress }}
									</span>
								</div>
								<div class="item">
									<span class="label"> 面积： </span>
									<span class="value"> {{ selectedMapAreaData.projectAreaSize }} km² </span>
								</div>
								<div class="item">
									<span class="label"> 负责人： </span>
									<span class="value">
										{{ selectedMapAreaData.contactPerson }}
									</span>
								</div>
								<div class="item">
									<span class="label"> 联系方式： </span>
									<span class="value">
										{{ selectedMapAreaData.contactPhone }}
									</span>
								</div>
								<div class="item img-item">
									<el-carousel
										:interval="5000"
										arrow="always"
										indicator-position="none"
										v-if="selectedMapAreaData.imgList"
									>
										<el-carousel-item v-for="(item, index) in selectedMapAreaData.imgList" :key="index">
											<img :src="item.url" alt="" />
										</el-carousel-item>
									</el-carousel>
									<img src="@/assets/images/test.jpg" alt="" v-else />
								</div>
							</div>
							<div class="info-text">
								<div class="main">
									{{ selectedMapAreaData.areaDesc }}
								</div>
							</div>
						</div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script setup>
import Map2d from '@/components/map2d/index'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { ref, inject, nextTick } from 'vue'
// import { generateRandomBrightColor } from '@/utils/tool'
// import * as echarts from 'echarts'
// import elementResizeDetectorMaker from 'element-resize-detector'
import { areaList, eventStatis, eventList } from '@/http/apis/index.js'
// let erd = elementResizeDetectorMaker() //创建实例
const mars2d = inject('mars2d')
// gis地址
// const GIS_API = import.meta.env.VITE_API_GIS_API
// 地图对象
let map = null
// 地图数据图层组
let mapLayerGroup = null
// 地图配置
const mapConfig = {
    mapId: 'dataOverMap',
    center: {
        lng: 104.194336,
        lat: 35.947266
    },
    zoom: 4,
    basemaps: [
        // {
        //     type: 'wmts',
        //     name: '蓝色地图',
        //     url: GIS_API + '/geoserver/Ele_Map/gwc/service/wmts',
        //     layer: 'Ele_Map:HH_Basemap',
        //     format: 'image/png',
        //     tileMatrixSetID: 'EPSG:4326', // 对应wmts请求的 tilematrixSet
        //     tilematrixBefore: 'EPSG:4326:', // 对应wmts请求的 tilematrix
        //     crs: 'EPSG:4326',
        //     show: true
        // },
        {
            name: '高德卫星',
            type: 'group',
            show: true,
            layers: [
                { name: '底图', type: 'gaode', layer: 'img_d' }
                // { name: "注记", type: "gaode", layer: "img_z" }
            ]
        }
    ]
}
// 地图是否加载成功
const mapLoadSuccess = ref(false)
// 数据是否获取成功
const loadData = ref(false)
// 列表自动滚动
const isScroll = ref(true)
// 地图点位数据
const mapAreaDataList = ref([])
// 选中的地图点位数据
const selectedMapAreaData = ref({})
// 事件统计数据
const eventStatisData = ref([
    {
        name: '事件总数',
        icon: new URL(`./images/icon-dcl.png`, import.meta.url).href,
        value: 0
    },
    {
        name: '已处理',
        icon: new URL(`./images/icon-ycl.png`, import.meta.url).href,
        value: 0
    },
    {
        name: '待处理',
        icon: new URL(`./images/icon-clz.png`, import.meta.url).href,
        value: 0
    },
    {
        name: '解决率',
        icon: new URL(`./images/icon-jul.png`, import.meta.url).href,
        value: '0%'
    }
])
// 事件列表数据
const eventListData = ref()



/**
 * 地图加载成功
 */
const handelMapLoadSuccess = async params => {
    map = params.map
    mapLoadSuccess.value = params.status
    // 执行数据面板显示的动画
    loadData.value = true
    await nextTick()
    // 创建当前页面数据图层组
    createMapLayerGroup()
    // 查询地图点位数据
    handelFeatchMapAreaData()
    // 查询事件统计数据
    handelFeatchApplyList()
    // 查询事件列表数据
    handelFeatchEventList()
}
/**
 * 创建地图数据图层组
 */
const createMapLayerGroup = () => {
    mapLayerGroup = new mars2d.layer.GroupLayer({
        id: 'data-overview-point-layer',
        name: '数据概览地图数据图层组'
    })
    map.addLayer(mapLayerGroup)
}
/**
 * 获取项目数据
 */
const handelFeatchMapAreaData = async () => {
    let res = await areaList({})
    if (res && res.code === 0) {
        mapAreaDataList.value = res.data
        addMapAreaData()
    } else {
        mapAreaDataList.value = []
    }
}

/**
 * 叠加项目点位
 */
const addMapAreaData = () => {
	const graphicLayer = new mars2d.layer.GraphicLayer({
        name: '点位图层',
	})
	mapLayerGroup.addLayer(graphicLayer)
    mapAreaDataList.value.forEach(ele => {
		if (ele.lat && ele.lng) { 
			const graphic = new mars2d.graphic.Marker({
				latlng: [ele.lat, ele.lng],
				style: {
					image: new URL(`@/assets/images/icon-point.png`, import.meta.url).href,
					width: 32,
					height: 80,
					horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
					verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
					title: ele.areaName,
					alt:ele.areaName,
				},
				attr: ele
			})
			graphicLayer.addGraphic(graphic);
			// graphic.bindPopup(`${ele.areaName}`).openPopup()
			graphic.on(mars2d.EventType.click, function (event) {
				selectedMapAreaData.value = event.target.options.attr;
				loadData.value = true;
				map.flyToGraphic(graphic);
				addMapArea();
			})
		}
       
    })
}
/**
 * 叠加项目区域
 */
 const addMapArea = () => {
	removeMapArea(); 
	const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
		id:selectedMapAreaData.value.id,
		name: '范围数据',
		data: selectedMapAreaData.value.areaJson,
		attr: selectedMapAreaData.value,
		symbol: {
			type:'polyline'
		}
	})
	mapLayerGroup.addLayer(geoJsonLayer);
	geoJsonLayer.on(mars2d.EventType.click, function (event) {
		// 地图区域点击
		handelMapAreaClick(event.target.options.attr)
	})
}
/**
 * 地图区域点击
 */
const handelMapAreaClick = async () => {
    await nextTick()
    loadData.value = true
}

/**
 * 移除项目区域
 */
const removeMapArea = () => { 
	mapLayerGroup && mapLayerGroup.eachLayer((layers) => { 
		console.log('layers', layers)
		if (layers && layers.options.name === '范围数据') { 
			mapLayerGroup.removeLayer(layers)
		}
	})
}

/**
 * 获取事件统计数据
 */
const handelFeatchApplyList = async () => {
    let res = await eventStatis()
    if (res && res.code === 0) {
        eventStatisData.value.forEach(ele => {
            if (ele.name === '事件总数') {
                ele.value = res.data.totalNum
            } else if (ele.name === '已处理') {
                ele.value = res.data.processedNum
            } else if (ele.name === '待处理') {
                ele.value = res.data.pendingNum
            } else if (ele.name === '解决率') {
                ele.value = res.data.resolutionRatNum + '%'
            }
        })
    }
}
/**
 * 获取事件列表数据
 */
const handelFeatchEventList = async () => {
    let res = await eventList({})
    if (res && res.code === 0) {
        eventListData.value = res.data
    } else {
        eventListData.value = []
    }
}
</script>
<style lang="scss" scoped>
.data-overview {
    @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    position: relative;
    .map-box {
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    }
    .left-container {
        position: absolute;
        left: 10px;
        top: 80px;
        @include box-flex(
            $width: 350px,
            $height: calc(100% - 100px),
            $direction: column,
            $justify: flex-start,
            $align: center
        );
        z-index: 1000;
        > .card-container {
            @include box-flex($width: 100%, $height: auto, $direction: column, $justify: center, $align: center);
            margin-bottom: 10px;
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: center,
                    $align: center,
                    $flex-1: 1
                );
                .left {
                    @include box-flex($width: auto, $height: auto, $direction: row, $justify: center, $align: center);
                    &:before {
                        content: '';
                        display: block;
                        width: 1px;
                        height: 1px;
                        border-top: solid 5px #00ddff;
                        border-left: solid 5px #00ddff;
                        transform: rotate('45deg');
                        margin-right: 10px;
                    }
                }
            }
        }
        > .event-repot {
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: row,
                    $justify: space-between,
                    $align: center,
                    $flex-1: 1,
                    $flex-wrap: wrap
                );
                padding: 5% 0;
                .item {
                    @include box-flex($width: 50%, $height: 50%, $direction: row, $justify: center, $align: center);
                    .icon {
                        @include box-flex(
                            $width: 80px,
                            $height: 80px,
                            $direction: row,
                            $justify: center,
                            $align: center
                        );
                        background: url('@/views/dataOverview/images/bg-data-cicle.png') no-repeat;
                        background-size: 100% 100%;
                        img {
                            width: 60px;
                            height: auto;
                            margin: 0 0 15px 15px;
                        }
                    }
                    .content {
                        @include box-flex(
                            $width: auto,
                            $height: auto,
                            $direction: column,
                            $justify: center,
                            $align: flex-start,
                            $flex-1: 1
                        );
                        .name {
                            @include box-flex(
                                $width: 100px,
                                $height: 30px,
                                $direction: row,
                                $justify: flex-start,
                                $align: center
                            );
                            background: url('@/views/dataOverview/images/bg-data-title.png') no-repeat;
                            background-size: 100% 100%;
                            position: relative;
                            padding-left: 10px;
                            &::before {
                                display: block;
                                content: '';
                                left: 0;
                                width: 5px;
                                height: 5px;
                                border-radius: 50%;
                                background: #00ddff;
                                margin-right: 5px;
                            }
                        }
                        .value {
                            color: #00ddff;
                            font-size: 28px;
                            font-family: font-number;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
        > .patrol-ins {
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: space-between,
                    $align: center,
                    $flex-1: 1
                );
                padding: 5% 0;
                .item {
                    @include box-flex(
                        $width: 100%,
                        $height: auto,
                        $direction: column,
                        $justify: center,
                        $align: center
                    );
                    .label {
                        @include box-flex(
                            $width: 100%,
                            $height: auto,
                            $direction: row,
                            $justify: space-between,
                            $align: center
                        );
                        padding: 0 20px;
                        font-size: 14px;
                        margin-bottom: 5px;
                        .value {
                            font-size: 14px;
                            color: #fff;
                            font-family: font-number;
                        }
                    }
                    .progess {
                        @include box-flex(
                            $width: 100%,
                            $height: auto,
                            $direction: row,
                            $justify: center,
                            $align: center
                        );
                    }
                }
            }
        }
        > .event-list {
            flex: 1;
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: flex-start,
                    $align: center,
                    $flex-1: 1
                );
                padding: 10px;
                .scroll {
                    @include box-flex(
                        $width: 100%,
                        $height: 100%,
                        $direction: column,
                        $justify: flex-start,
                        $align: center
                    );
                    .list-item {
                        @include box-flex(
                            $width: 100%,
                            $height: auto,
                            $direction: row,
                            $justify: space-between,
                            $align: center
                        );
                        padding: 10px 20px;
                        background: rgba($color: #002e81, $alpha: 0.5);
                        margin: 5px 0;
                        > div {
                            @include box-flex(
                                $width: auto,
                                $height: auto,
                                $direction: row,
                                $justify: center,
                                $align: center
                            );
                        }
                    }
                }
            }
        }
    }
    .right-container {
        position: absolute;
        right: 10px;
        top: 80px;
        @include box-flex(
            $width: 350px,
            $height: calc(100% - 100px),
            $direction: column,
            $justify: space-between,
            $align: center
        );
        z-index: 1000;
        > .card-container {
            @include box-flex($width: 100%, $height: 32.5%, $direction: column, $justify: center, $align: center);
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: center,
                    $align: center,
                    $flex-1: 1
                );
                .chart-box {
                    @include box-flex(
                        $width: 100%,
                        $height: 100%,
                        $direction: column,
                        $justify: center,
                        $align: center
                    );
                }
            }
        }
        > .osmotic-pressure {
            @include box-flex($width: 100%, $height: auto, $direction: column, $justify: center, $align: center,$flex-1:1);
			.card-content {
				padding: 10px;
				.info {
					@include box-flex(
						$width: 100%,
						$height: 100%,
						$direction: column,
						$justify: center,
						$align: center
					);
					.info-list {
						@include box-flex(
							$width: 100%,
							$height: auto,
							$direction: column,
							$justify: flex-start,
							$align: center
						);
						.item {
							@include box-flex(
								$width: 100%,
								$height: 30px,
								$direction: row,
								$justify: space-between,
								$align: center
							);
							background: rgba($color: #08223e, $alpha: 0.5);
							margin: 5px 0;
							padding: 0 20px;
						}
						.img-item{
							height: 200px;
							padding: 10px;
							img{
								width: 100%;
								height: 100%;
							}
						}
					}
					.info-text {
						@include box-flex(
							$width: 100%,
							$height: auto,
							$direction: column,
							$justify: flex-start,
							$align: flex-start,
							$flex-1: 1
						);
						padding: 10px;
						.main {
							@include box-flex(
								$width: 100%,
								$height: 100%,
								$direction: column,
								$justify: flex-start,
								$align: flex-start
							);
							overflow-y: auto;
							letter-spacing: 1px;
							line-height: 25px;
							text-indent: 2em;
						}
					}
				}
			}
        }
    }
}
</style>
<style lang="scss">
.my-progress {
    width: 90%;
    height: 100%;
    .el-progress-bar__innerText {
        display: none;
    }
    .el-progress-bar__outer {
        background: rgba($color: #000000, $alpha: 0.2);
        padding: 1px;
        height: 10px !important;
    }
    .el-progress-bar__inner {
        background-color: transparent;
        background-image: linear-gradient(to right, #ade3fa, #06affd);
        height: 8px;
        left: 1px;
        top: 1px;
    }
}
.scroll {
    @include box-flex($width: 100%, $height: auto, $direction: column, $justify: flex-start, $align: center);
    > div {
        width: 100% !important;
    }
}
</style>
